<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            user-select: none;
        }

        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
        }

        #app {
            width: 600px;
            height: 600px;
            border-radius: 15px;
            border: 1px solid rgba(0, 0, 0, .3);
            position: fixed;
            left: 50%;
            transform: translateX(-50%);
        }

        .commit{
            height: 400px;
            .item {
                display: flex;
                justify-content: space-between;
                align-items: center;
                height: 40px;
                border-top: 1px solid #eee;
            }
        }
        #app .commit .item:last-child {
            border-bottom: 1px solid #eee;

        }
        .textareaBox{
            display: flex;

            justify-content: center;
        }



    </style>
</head>
<body>
<div id="app">
    <h1>评论区</h1>

    <div>
        <span>请选择文字颜色</span>
        <label v-for="item in colorList">
            <input type="radio" name="button" :value="item" v-model="color">
            <span :style="{backgroundColor:item}">{{ item }}</span>
        </label>
    </div>
    <div class="commit">
        <div class="item" v-for="(item,index) in commitList" :key="index">
            <p :style="{color:item.color}">{{ item.content }}</p>
            <span @click="removeOn(index,item.id)">X</span>
        </div>
    </div>

    <div class="textareaBox">
        <textarea cols="70" rows="5" v-model="content"></textarea>
        <button @click="send">发布</button>
    </div>


</div>

<!--<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>-->
<script src="vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            colorList: ['red', 'blue', 'green', 'yellow', 'pink'],
            color: 'red',
            content:'',
            commitList:[]
        },
        methods: {
             send(){
                 if(this.content==='')return alert("请输入评论内容")
                this.commitList.push({
                    id:Math.random()+'',
                    content:this.content,
                    color:this.color
                })
                 this.content=''
            },
            removeOn(index,id){
                // this.commitList=this.commitList.filter(item=>{item.id!==id})
                this.commitList.splice(index,1)
                console.log(index, id)
            }
        }
    })


</script>

</body>
</html>